<template>
  <div class="refund-info-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true">
      <el-form-item label="微信信息:" prop="wxKeyword">
        <el-input
          style="width: 300px"
          v-model="queryParams.wxKeyword"
          placeholder="请输入微信昵称或ID"
          clearable
          @keyup.enter.native="handleQuery">
          <el-button circle slot="append" icon="el-icon-search" @click="handleQuery"></el-button>
        </el-input>
      </el-form-item>
      <el-form-item label="报名信息:" prop="enrollKeyword">
        <el-input
          style="width: 300px"
          v-model="queryParams.enrollKeyword"
          placeholder="请输入报名信息"
          clearable
          @keyup.enter.native="handleQuery">
          <el-button circle slot="append" icon="el-icon-search" @click="handleQuery"></el-button>
        </el-input>
      </el-form-item>
      <el-form-item label="退款类型:" prop="refundType">
        <el-select v-model="queryParams.refundType" placeholder="请选择" clearable @change="handleQuery">
          <el-option key="auto" label="自动退款" value="auto"/>
          <el-option key="manual" label="手动退款" value="manual"/>
        </el-select>
      </el-form-item>
      <el-form-item label="退款时间:">
        <el-date-picker
          v-model="queryParams.refundDateRange"
          value-format="yyyy-MM-dd"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          @change="handleQuery"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="是否分销退款:" prop="isDistribution">
        <el-select v-model="queryParams.isDistribution" placeholder="请选择" clearable @change="handleQuery">
          <el-option key="1" label="是" :value="1"/>
          <el-option key="2" label="否" :value="2"/>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button icon="el-icon-refresh" size="small" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="dataList">
      <el-table-column label="序号" type="index">
        <template slot-scope="scope">
          <span>{{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column label="微信信息">
        <template slot-scope="scope">
          <div class="info-box">
            <div class="img-box">
              <img :src="scope.row.avatarUrl" alt=""/>
            </div>
            <div class="content-box">
              <div>
                {{ scope.row.nickname }}
              </div>
              <div>
                ID:{{ idDesensit(scope.row.wxId) }}
              </div>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="团内身份">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.team_identity" :value="scope.row.identity"/>
        </template>
      </el-table-column>
      <el-table-column label="所属团">
        <template slot-scope="scope">
          <spam>-</spam>
        </template>
      </el-table-column>
      <el-table-column label="报名信息">
        <template slot-scope="scope">
          <div>{{ scope.row.enrollName }}</div>
          <div>{{ scope.row.enrollMobile }}</div>
        </template>
      </el-table-column>
      <el-table-column label="报名商品">
        <template slot-scope="scope">
          <spam>（未成团）</spam>
        </template>
      </el-table-column>
      <el-table-column label="退款金额（元）">
        <template slot-scope="scope">
          {{ scope.row.refundAmount }}元
        </template>
      </el-table-column>
      <el-table-column label="退款分销金额（元）">
        <template slot-scope="scope">
          <span v-if="scope.row.oneDistributionAmount || scope.row.twoDistributionAmount">{{ Number(scope.row.oneDistributionAmount) + Number(scope.row.twoDistributionAmount) }}元</span>
          <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column label="退款类型">
        <template slot-scope="scope">
          <span v-if="scope.row.refundType">
            {{ scope.row.refundType === 'auto' ? '自动退款' : scope.row.refundType === 'manual' ? '手动退款' : '-' }}
          </span>
          <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column label="退款时间">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.refundTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <router-link :to="'/order/detail/index/' + scope.row.orderId" class="link-type">
            <el-button size="small" type="text">详情</el-button>
          </router-link>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getRefundList"
    />
  </div>
</template>

<script>
import {refundPageList} from "@/api/triones/activity";

export default {
  name: "RefundInfoList",
  props: {
    value: {
      type: Number, String
    }
  },
  dicts: ['team_identity'],
  data() {
    return {
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        activityId: undefined,
        wxKeyword: undefined,
        enrollKeyword: undefined,
        refundType: undefined,
        refundDateRange: [],
        isDistribution: undefined
      },
      dataList: [],
      total: 0
    }
  },
  created() {
    this.getRefundList();
  },
  methods: {
    /** 获取退款列表 */
    getRefundList() {
      this.queryParams.activityId = this.value;
      refundPageList(this.queryParams).then(response => {
        this.dataList = response.rows;
        this.total = response.total;
      })
    },
    /** 检索 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getRefundList();
    },
    /** 重置 */
    resetQuery() {
      this.resetForm('queryForm')
      this.queryParams.refundDateRange = [];
      this.handleQuery()
    }
  }
}
</script>

<style lang="scss" scoped>
.refund-info-container {
  margin: 0;
  padding: 0px 0px 10px;
  box-sizing: border-box;
}
</style>
